<app>
    <header if="{ isLoggedIn }"></header>
    <section class="page-container">
        <sidebar if="{ isLoggedIn }"></sidebar>
        <div class="page" ref="page"></div>
        <toast items="{ toasts }"></toast>
        <modal data="{ modal }"></modal>
    </section>

    <script>
        import route from '../route'
        import {isFunction} from '../../shared/util'
        import store, {Action_Login, Action_Logout, Action_Toast, 
            Action_Show_Modal, Action_Hide_Modal} from '../store'
        import './components/page/header.html'
        import './components/page/sidebar.html'
        import './components/modal/toast.html'
        import './components/modal/modal.html'

        const baseUrl='#!/', homeUrl='#!/',loginUrl = '#!/login'

        function getHash(){
            return (window.location.hash || '').toLowerCase()
        }

        function isLoginUrl(){
            return getHash() === loginUrl
        }

        function checkAuth(){
            if(!isLoginUrl() && !store.isLoggedIn){
                store.logout()
                return
            }
            if(isLoginUrl() && store.isLoggedIn){
                store.login()
                return
            }
            return true
        }

        //start routes
        const stop = route((conf,query)=>{
            if(!checkAuth()) return

            const name = 'page-' + conf.page
            require(`./pages/${name}.html`) //webpack dynamic require; otherwise you have to import all pages in advance

            //it may be a good idea to use mount directly here
            this.page = name
            this.query = query
            // const old = this.refs.page._tag;
            // if(old){
            //     old.unmount(true)
            // }
            return riot.mount(this.refs.page, this.page, { query })[0]
            //this.update()
            //return this.refs.page //return the mounted page tag
        }, baseUrl)

        this.on('unmount', ()=> stop())

        //login status
        this.isLoggedIn = store.isLoggedIn
        store.on(Action_Login, ()=>{
            this.isLoggedIn = store.isLoggedIn
            this.update()
            if(isLoginUrl()){
                window.location.href = homeUrl
            }
        })
        store.on(Action_Logout, ()=>{
            this.isLoggedIn = store.isLoggedIn
            this.update()
            if(!isLoginUrl()){
                window.location.href = loginUrl
            }
        })

        //toasts
        this.toasts = store.toasts
        store.on(Action_Toast, ()=>{
            this.toasts = store.toasts
            this.update()
        })

        this.modal = store.modal
        const updateModal = (modal)=>{
            this.modal = modal
            this.update()
        }
        store.on(Action_Show_Modal, updateModal)
        store.on(Action_Hide_Modal, updateModal)
    </script>

    <style type="text/less">
        :scope, .page-container{
            display:block;
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }

        :scope, .page-container, header, sidebar, .page{
            border:0;
            margin:0;
            padding:0;
        }

        .page-container{
            top:50px;
        }

        header {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1030;
        }

        sidebar {
            position: absolute;
            top:0;
            left:0;
            bottom:0;
            width: 220px;
        }

        .page {
            position: absolute;
            top:0;
            left:220px;
            bottom:0;
            right:0;
            overflow-y: auto;
            overflow-x: hidden;
            opacity: 1;
            transition: opacity .3s;
            background: #FFF;
        }
    </style>
</app>